﻿@page "/components/colorpicker"

<DocsPage>
    <DocsPageHeader Title="Color Picker" Component="@nameof(MudColorPicker)" />
    <DocsPageContent>

        <DocsPageSection>
            <SectionHeader Title="Basic Usage">
                <Description></Description>
            </SectionHeader>
            <SectionContent Code="@nameof(ColorPickerBasicExample)">
                <ColorPickerBasicExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Parts">
                <Description>All parts of the color picker can be removed individually if you only want certain features.</Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" Code="@nameof(ColorPickerPlaygroundExample)" ShowCode="false">
                <ColorPickerPlaygroundExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Color Picker View">
                <Description>The default view can be changed with <CodeInline>ColorPickerView</CodeInline>. This is useful if you want a minimal color picker or want to restrict the available colors.</Description>
            </SectionHeader>
            <SectionContent Code="@nameof(ColorPickerViewModeExample)">
                <ColorPickerViewModeExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Color Picker Mode">
                <Description>You can set the default mode of the color picker with the <CodeInline>ColorPickerMode</CodeInline> property. Combine this with <CodeInline>ShowModeSwitch="false"</CodeInline> to force a specific color mode.</Description>
            </SectionHeader>
            <SectionContent Code="@nameof(ColorPickerColorModeExample)">
                <ColorPickerColorModeExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Custom Palette">
                <Description>You can change the default palette with the <CodeInline>Palette</CodeInline> property. The first five colors appear in the quick view when clicking the color preview dot.</Description>
            </SectionHeader>
            <SectionContent Code="@nameof(ColorPickerPaletteExample)" ShowCode="false">
                <ColorPickerPaletteExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Alpha">
                <Description>Disable the alpha slider and its text field by setting <CodeInline>ShowAlpha="false"</CodeInline>. This removes transparency and outputs RGB, HSL, or HEX instead of RGBA, HSLA, or HEXA.</Description>
            </SectionHeader>
            <SectionContent Code="@nameof(ColorPickerAlphaExample)">
                <ColorPickerAlphaExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Switch Mode">
                <Description>Switch Mode lets users switch between RGB, HSL, and HEX. You can disable the button with <CodeInline>ShowModeSwitch="false"</CodeInline> if you want to control the input/output type.</Description>
            </SectionHeader>
            <SectionContent Code="@nameof(ColorPickerSwitchModeExample)">
                <ColorPickerSwitchModeExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Dialog Mode">
                <Description></Description>
            </SectionHeader>
            <SectionContent Code="@nameof(ColorPickerDialogExample)">
                <ColorPickerDialogExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Inline Mode">
                <Description></Description>
            </SectionHeader>
            <SectionContent Code="@nameof(ColorPickerInlineExample)">
                <ColorPickerInlineExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Static Mode">
                <Description></Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" Code="@nameof(ColorPickerStaticExample)">
                <ColorPickerStaticExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Elevation">
                <Description>You can change the elevation with the <CodeInline>Elevation</CodeInline> parameter. The default is 8 for Inline, and 0 for Static or Dialog.</Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" Class="demo-datetime-margin" Code="@nameof(ColorPickerElevationExample)">
                <ColorPickerElevationExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Example Usage">
            </SectionHeader>
            <SectionContent Class="px-0 pt-0" Code="@nameof(ColorPickerExampleUsageExample)" ShowCode="false">
                <ColorPickerExampleUsageExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Drag Interaction">
                <Description>
                    The <CodeInline>ThrottleInterval</CodeInline> property controls how long to wait before updating the color while dragging in the spectrum view.
                    If <CodeInline>DragEffect</CodeInline> is set to false, the color selector (circle) will not follow the pointer.
                </Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" Code="@nameof(ColorPickerDragExample)">
                <ColorPickerDragExample />
            </SectionContent>
        </DocsPageSection>

    </DocsPageContent>
</DocsPage>
